<template>
	<view class="develop-content">
		<page-head :transparent="'linear-gradient(to right, #4EB6FF, #0096FF)'" class="yk">
			<slot slot="title">
				<view class="title-box"> {{ title.length > 10 ? title.substr(0, 10) + '...' : title }}</view>
			</slot>
			<slot slot="right">
				<view class="image-box"><image src="../../static/img/zhanye/btn.png" mode="aspectFill"></image></view>
				<view class="image-box-btn">
					<view class="box-btn" @click="headBtn()"></view>
					<view class="box-btn" @click="closePage()"></view>
				</view>
			</slot>
		</page-head>
	<!-- 	<yk-header :title="title"></yk-header> -->
		<view class="develop-head">
			<image src="../../static/img/zhanye/beijing.png" mode=""></image>
			<view class="develop-head-data">
				<view class="develop-data-box develop-head-client" @click="tosendCoupon">
					<image class="shoplog" src="../../static/img/zhanye/icon-shoplog.png" mode=""></image>
					<view class="develop-data-box-right">
						<view>购物券额度</view>
						<!-- <view>{{ totalCustomer }}</view> -->
						<view>{{parseFloat(88888888).toLocaleString()}}</view>
					</view>
				</view>
				<view class="develop-data-box develop-head-souxinedu" @click="toAmountDil()">
					<image class="souxinedu" src="../../static/img/zhanye/souxinedu.png" mode=""></image>
					<view class="develop-data-box-right">
						<view>授信额度</view>
						<view>{{parseFloat(availableCredit).toLocaleString()}}</view>
					</view>
				</view>
				<view class="develop-data-box develop-head-client" @click="toClient">
					<image class="wdkehu" src="../../static/img/zhanye/icon-wdkehu.png" mode=""></image>
					<view class="develop-data-box-right">
						<view>我的客户</view>
						<view>{{parseFloat(totalCustomer).toLocaleString()  }}</view>
					</view>
				</view>
				<view class="develop-data-box develop-head-money">
					<image class="duihuanjine" src="../../static/img/zhanye/icon-duihuanjine.png" mode=""></image>
					<view class="develop-data-box-right">
						<view>客户兑换金额</view>
						<view>{{ parseFloat(totalDeduction).toLocaleString() }}</view>
					</view>
				</view>
			</view>
		</view>

		<image class="develop-banner" src="../../static/img/zhanye/banner.png" mode=""></image>

		<view class="develop-section">
			<view class="develop-section-box" @click="toBase">
				<image src="../../static/img/zhanye/icon-jibentongji.png" mode=""></image>
				<view>基本统计</view>
			</view>
			<view class="develop-section-box" @click="toClient">
				<image src="../../static/img/zhanye/icon-wodekehu.png" mode=""></image>
				<view>我的客户</view>
			</view>
			<view class="develop-section-box" @click="toMygift">
				<image src="../../static/img/zhanye/lipinka.png" mode=""></image>
				<view>优惠卡</view>
			</view>
			<view class="develop-section-box" @click="toMaterial">
				<image src="../../static/img/zhanye/material1.png" mode=""></image>
				<view>营销素材</view>
			</view>
			<view class="develop-section-box" @click="toGuest">
				<image src="../../static/img/zhanye/guest.png" mode=""></image>
				<view>客勤小助手</view>
			</view>
			<view class="develop-section-box" @click="toUsing">
				<image src="../../static/img/zhanye/icon-shiyongbangzhu.png" mode=""></image>
				<view>使用帮助</view>
			</view>
		</view>

		<view class="go-bind-card" @click="toBindgift">绑卡</view>
	</view>
</template>

<script>
import Ykhead from '../../components/yk/yk-header.vue';
export default {
	onLoad(event) {
		window.genVersion();
		if (event.token != '' && event.token != 'null' && event.token != null && event.token != undefined && event.token != 'undefined') {
			/* uni.setStorageSync('token', decodeURI(event.token));
			uni.setStorageSync('bump', event.bump);
			uni.setStorageSync('relationId', event.relationId);
			uni.setStorageSync('mobile', event.customerId); */
		} else {
			// onStartLogin();
		}
	},
	onShow() {
		window.genCommonData();
		uni.showLoading({
			title: '加载中'
		});
		this.getTotal();
		this.getUserIdentity();
	},
	data() {
		return {
			totalCustomer: 0,
			totalDeduction: 0,
			availableCredit: 0,
			userIdentity:'',
			saveList: [],
			loadingText: '加载中...',
			title: '赢客'
		};
	},
	onReachBottom: function() {},
	onPullDownRefresh: function() {
		this.getTotal();
	},
	methods: {
		//获取用户身份
		getUserIdentity(){
			try {
				uni.request({
					url: this.$usereq + '/coupon-expand/rechargeable/countdeduction/rule',
					method: 'GET',
					header: {
						'blade-auth': decodeURI(uni.getStorageSync('token')),
						'content-type': 'application/json'
					},
					data: {},
					success: res => {
						let datas = res.data;
						console.log(datas);
						this.userIdentity=datas.data;
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			} catch (e) {
				console.log(e.message);
			}
		},
		//顶部功能键
		headBtn(e){
			let that=this;
			console.log('sdsd');
			uni.showActionSheet({
				itemList: ['刷新', '清除缓存'],
				success: function (res) {
					console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					if(res.tapIndex==0){
						//刷新
						that.getTotal();
					}else{
						//清楚缓存
						// callNative('onClearH5Cache')
							uni.showToast({
								title: '清除缓存成功'
							});
					}
				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		},
		//关闭当前页面
		closePage(){
			callNative('navigateBack') 
		},
		getPoster() {
			h5NavigateTo({
				url: 'poster'
			});
		},
		getTotal() {
			try {
				uni.request({
					url: this.$usereq + '/coupon-expand/rechargeable/countdeduction/total',
					method: 'GET',
					header: {
						'blade-auth': decodeURI(uni.getStorageSync('token')),
						'content-type': 'application/json'
					},
					data: {},
					success: res => {
						let datas = res.data;
						console.log(datas);
						this.totalCustomer = datas.data.totalCustomer != '' && datas.data.totalCustomer != null ? datas.data.totalCustomer : 0;
						this.totalDeduction = datas.data.totalDeduction != '' && datas.data.totalDeduction != null ? datas.data.totalDeduction : 0;
						this.availableCredit = datas.data.availableCredit != '' && datas.data.availableCredit != null ? datas.data.availableCredit : 0;
						// this.money = res.data.data;
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			} catch (e) {
				console.log(e.message);
			}
		},
		toBindgift(e) {
			h5NavigateTo({
				url: 'bindgift'
			});
		},
		toClient(e) {
			h5NavigateTo({
				url: 'myclient'
			});
		},
		toUsing(e) {
			h5NavigateTo({
				url: 'usingHelp'
			});
		},
		toMaterial(e) {
			uni.navigateTo({
				url: 'material'
			});
		},
		toMygift(e) {
			h5NavigateTo({
				url: 'myGiftcard'
			});
		},
		toAmountDil(e) {
			h5NavigateTo({
				url: 'amountDil'
			});
		},
		toGuest(e) {
			h5NavigateTo({
				url: 'guest'
			});
		},
		toBase(e) {
			h5NavigateTo({
				url: 'baseCount?userRank='+this.userIdentity
			});
		},
		tosendCoupon(){
			h5NavigateTo({
				url:'./sendCoupon'
			})
		}
	}
};
</script>

<style lang="scss">
.title-box{
	padding-left: 	134px;
}
.image-box {
	width: 174px !important;
	height: 64px !important;
	position: relative;
	top: -12px;
	display: flex;
	flex-wrap: wrap;
	image {
		width: 100%;
		height: 100%;
	}
}
.image-box-btn{
	width: 100%;
	height: 100%;
	position: absolute;
	top: -12px;
	right: 0;
	z-index: 100;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	.box-btn{
		width: 50%;
		height: 64px;
		display: flex;
		flex-wrap: wrap;
	}
	view{
		width: 50%;
		height: 64px;
		display: flex;
		flex-wrap: wrap;
	}
}
.develop-content {
}
.develop-head {
	width: 100%;
	min-width: 750px;
	position: relative;

	image {
		width: 100%;
		max-height: 300px;
	}
	.develop-head-data {
		width: 710px;
		height: 340px;
		border-radius: 10px;
		background: #fff;
		position: absolute;
		padding: 52px 0;
		box-sizing: border-box;
		left: 20px;
		top: 80px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		box-shadow: 0px 10px 20px 0px rgba(191, 191, 191, 0.2);
		text-align: center;
		padding-left: 30px;
		.develop-data-box {
			width: 45%;
			text-align: left;
			font-size: 28px;
			display: flex;
			flex-direction: row;
			padding: 20px 0;
			image{
				margin-top: 32px;
			}
			.shoplog{
				width:38px;
				height:28px;
			}
			.souxinedu{
				width:38px;
				height:36px;
			}
			.wdkehu{
				width:40px;
				height:33px;
			}
			.duihuanjine{
				width:34px;
				height:36px;
			}
			.develop-data-box-right{
				padding-left: 20px;
				view:nth-child(1) {
				color: #181818;
				line-height: 32px;
				margin-top: 10px;
				font-size: 28px;
			}
				view:nth-child(2) {
					font-size:38px;
					font-family:Acumin Variable Concept;
					font-weight:bold;
					color:rgba(0,150,255,1);
					line-height:32px;
					margin-top: 20px;
				}
			}
			
		}
	}
}
.develop-banner {
	width: 710px;
	height: 130px;
	display: flex;
	margin: 0 auto;
	margin-top: 160px;
}
.develop-section {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: left;
}
.develop-section-box {
	width: 33.33%;
	text-align: center;
	margin-top: 60px;
	font-size: 28px;
	color: rgba(24, 24, 24, 1);
	image {
		width: 46px;
		height: 46px;
		margin-bottom: 10px;
	}
}
.go-bind-card {
	width: 180px;
	height: 180px;
	text-align: center;
	line-height: 180px;
	background: rgba(0, 150, 255, 1);
	box-shadow: 0px 0px 30px 0px rgba(0, 150, 255, 0.2);
	border-radius: 50%;
	color: #fff;
	margin: 0 auto;
	margin-top: 155px;
	font-size: 40px;
}
</style>
